<template>
  <div class="componentContainer gc-scrollbar-thin" >
    <h3>功能演示</h3>
    <p>展示甘特图基本操作。</p>

    <div id="GanttChartDIV3" style="width:94%;" class="mzganttContainer" >
    </div>

    <div style="margin-top: 10px;">
        <!-- <INPUT TYPE=BUTTON id="exportImg" style="margin-left: 90px;" @click='addRow("add")' VALUE="插入（选择行后）"/>
        <INPUT TYPE=BUTTON id="exportImg" style="margin-left: 10px;" @click='addRow("insert")' VALUE="插入（选择行前）"/>
        <INPUT TYPE=BUTTON id="exportImg" style="margin-left: 10px;" @click='addRow("append")' VALUE="新增（末尾）"/>
        <INPUT TYPE=BUTTON id="exportImg" style="margin-left: 10px;" @click='addRow("addChild")' VALUE="添加子任务"/>
        <INPUT TYPE=BUTTON id="exportImg" style="margin-left: 10px;" @click='deleteRows();' VALUE="删除"/> -->

    </div>

  </div>
</template>
<script>
import {MZGantt,MZGanttEditor} from '/node_modules/mzgantt';

// MZGantt.LicenseKey = "???";

import stop from '../static/images/stop.png';
import star from '../static/images/star.png';

  export default {
    data(){
      return {
        MZGantt: null,
        bulkMoveType: " ",
        changeDurSign: "1",
        contentHeight:500
      }
    },
    mounted () {
      this.autoFitPage();
      this.showGantt();
    },
    methods:{
      // 线索路径编辑器
      showGantt: function () {
          // ============================================甘特图配置============================================
          //甘特图计划/实绩条背景，可以设置为图片"url(img/symbol_plan.gif)"或者颜色值（例：#ffffff）。
          var vPlanBackground = '#00ff00', vResultBackground = '#cccccc';

          var icoList = [							// 资源列表
            {text:"1",value:"0", src:"<img src='./images/star.png'>"},
            {text:"2",value:"1", src:"<img src='./images/red.png'>"},
            {text:"3",value:"2", src:"<img src='./images/green.png'>"}
          ];

          var resourceList = [							// 资源列表
            {"value":"1","text":"郭富城"},
            {"value":"2","text":"黎明"},
            {"value":"3","text":"刘德华"},
            {"value":"4","text":"张学友"}
          ];

          // 自定义下拉框1
          var taskTypeList =[{"value":"00","text":"详细设计","style":"background:#F5D0A9;color:#FA5858"},
                    {"value":"01","text":"开发"},
                    {"value":"02","text":"检收"}
                  ];
          // 自定义下拉框2
          var tag2List = [{"value":"00","text":"未分配","style":"background:#F8E0EC;color:#000000"},
                          {"value":"01","text":"未着手"},
                          {"value":"02","text":"处理中"},
                          {"value":"03","text":"已完成"}
                  ];

          var saveType = "";


          function setCustColVal() {
            alert("click");
            // 设置弹框中自定义列值。
            // MZGantt.setEditorCustColVal(0,"set by callbackTaskWin");
          };
          function callbackTest() {
            alert("callbackGrid");
          };

          var ganttConfig = {
            useFor: "Task", 		// 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task

            includeHoliday: 'N',	// 工日计算是否包含假期和周末：Y: 包含；N:不包含
            includeToTime: "Y",		// 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y

            columnDefs: [							// 列定义完善（实现列显示顺序的定义，可编辑/只读属性，格式化，列默认值）
              {name: 'seq', 		field: "seq",		type:"normal"},			// type: level/normal
		          {name: 'checkbox',	field: "checkbox"},

              // 以下字段field固定，有固定编辑控件，不可重新设置（不支持设置type）
              {name: 'name',		field: "name", 		title: "项目任务", width: 130},

              {name:"testCol1",	field: "custColsVal", title:"下拉框列1",  type: "DropDownList", options:taskTypeList, "width":90,"align":"left"},
              {name:"testCol2",	field: "custColsVal", title:"下拉框列2",  type: "DropDownList", options:tag2List, "width":90,"align":"left"},

              {name: 'resId', 	field: "resId",		title: "责任人",  width: 90,	options: resourceList, multipleSelect: true},
              {name: 'dur', 		field: "dur", 		title: "工期",	  width: 60},
              {name: 'pctComp', 	field: "pctComp", 	title: "完成度",   width: 60},
              {name: 'planStart', field: "planStart", title: "计划开始", width: 120},
              {name: 'planEnd', 	field: "planEnd",	title: "计划完成", width: 120},
              {name: 'planDur', 	field: "planDur", 	title: "计划人天", width: 60},
              {name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left"}
            ],

            showDependencies: 1,		// 是否显示 连接线(0/1),默认：0不显示。设置为0，则调用ganttObj.drawDepend()函数画依赖线也是无用的；反之，需要画出依赖线时，需要先设置该参数为1。

            captionType: 'Caption',		// 设置甘特图标题(None,Caption,Resource,Duration,Complete,Reserver)  None:不显示标题
            captionPosition: 'Right',	// 设置甘特图标题显示位置（Over:甘特图条上方；Right:甘特图条右侧，默认Over)

            // 显示日期格式和输入日期格式应该统一
            dateFormat: 'yyyy-mm-dd',	// 设置参数日期格式 ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd','yyyy/mm/dd')
            weekStartDay: 0,			// 设置星期第一日（1：星期一开始；0：星期天开始），默认：0

            //startEndDate: ['2014-6-18','2019-9-26'], 				// 指定项目起止日期。状态ganttStatus为p时，不指定则自动以当日进行设置。
            holidayList: ['2023-11-18','2023-11-19','2023-11-20'],	// 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
            workdayList: ['2023-11-02'], 							// 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。

            workingHourRange: ['1','23'],	// 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
            showChgDur: "0",				// 是否显示拖拽变更工日选项。0：不显示，1：显示。默认：1：显示。
            dragChgDur: "1",				// 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
            autoCalDur: 1,					// 设置自动计算工日（默认不自动计算）
            infoBoxItems: [
              {
                title: '',
                value: 'name',
                titleStyle: 'font-weight:bold;',
                valStyle: 'font-weight:bold;',
              },
              {
                title: '',
                expression: 'rsltStart+"哈哈"',
                titleStyle: 'color:#666;',
                valStyle: 'color:red;',
              },
              {
                title: '计划开始',
                value: 'planStart',
                titleStyle: 'color:#666;',
                valStyle: 'color:#00baad;',
              },
              {
                title: '计划结束',
                value: 'planEnd',
                titleStyle: 'color:#666;',
                valStyle: 'color:#00baad;',
              },
              {
                title: '完成度',
                value: 'pctComp',
                titleStyle: 'color:#666;',
                valStyle: 'color:#00baad;',
              },
              {
                title: '实际开始',
                value: 'rsltStart',
                titleStyle: 'color:#666;',
                valStyle: 'color:red;',
              },
              {
                title: '实际结束',
                value: 'rsltEnd',
                titleStyle: 'color:#666;',
                valStyle: 'color:#00baad;',
              },
            ],

            fixColsCnt:3,					// 设置锁定列数, 默认:0(不锁定列)
            durPrecision:2,					// 设置工期和工日精度（默认小数后一位）

            showDayDate: "date",			// 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
            showWeekIndex: "",				// 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。
            hourFormat: 0,					// 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.

            compBackground: '#0000FF',				// 设置完成度背景

            weekendHolidayBackColor: '#E6E6E6', 	// 设置休息日/假期背景
            currentTimeBackColor: ['h','#FF9797'],	// 设置当前时间背景(参数1：h: 通过设置表头样式显示当前时间; c: 通过设置内容单元格样式显示当前时间。参数2：颜色值)
            intervalColor: ['#FFFFFF','#F4F4F4'],	// 设置隔行背景颜色, 默认: #FFFFFF,#F4F4F4
            selectedRowColor: '#CAE1FF',	// 设置选中行背景颜色, 默认: #CAE1FF
            borderColor: '#9E9E9E',			// 设置甘特图边框颜色, 默认: #9E9E9E
            barBorderRadius: 6,				// 设置甘特图条圆角半径, 默认: 3px
            // barBorderWeight: 1,				// 设置甘特图条边框粗细, 默认: 1px
            barBorderColor: '#9E0000',		// 设置甘特图条边框颜色, 默认: 0000ff
            leftSideWidth: 260,				// 设置左侧框宽度, 默认:300px
            contentHeight: this.contentHeight,				// 设置甘特图高度（不含表头）, 默认:300px.如果在页面调用adjustGanttHeight函数使甘特图高度自适应，则次参数可不设置。
            rowHeight: 35,					// 设置行高度, 默认:25px

            ganttStatus: 'e',				// 设置甘特图状态:
                                    //   e:编辑计划
                                    //   r：只读

            hourColWidth: 20,
            dayColWidth: 20,
            monthColWidth: 200,
            quarterColWidth: 100
          };

          // 数据
          var data= [
            {"id":1,
            "seq": 1000,
              "iconColsVal":[],
              "name":"单位A施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "testCol1":"00",
              "testCol2":"00",
              "testCol3":"自定义列值",
              "caption":"重点关注"},
            {"id":11,
            "seq": 2000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"","end":"","dur":"2"}],
              "rsltStart":"2023-11-02",
              "rsltEnd":"2023-11-06",
              "rsltDur":1,
              "planBarColor":"#2EFE9A",
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":50,
              "isGroup":0,
              "parentId":1,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"02",
              "testCol2":"01",
              "testCol3":"自定义列值",
              "caption":""},
            {"id":12,
              "seq": 3000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-06","end":"2023-11-10"}],
              "rsltStart":"2023-11-07",
              "rsltEnd":"2023-11-10",
              "rsltDur":1,
              "planBarColor":"#2EFE9A",
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":10,
              "isGroup":0,
              "parentId":1,
              "isExpand":1,
              "testCol1":"03",
              "testCol2":"01",
              "testCol3":"自定义列值",
              "preNodes":"",
              "caption":"备注1"},
            {"id":13,
              "seq": 4000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-11-11","end":"2023-11-15"}],
              "rsltStart":"2023-11-11",
              "rsltEnd":"2023-11-14",
              "rsltDur":1,
              "planBarColor":"#2EFE9A",
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":20,
              "isGroup":0,
              "parentId":1,
              "isExpand":1,
              "preNodes":[
                {"id":12,"type":"SS"}
              ],
              "testCol1":"00",
              "testCol2":"01",
              "testCol3":"自定义列值",
              "caption":""},
            {"id":14,
              "seq": 5000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"","end":"2023-11-17"}],
              "rsltStart":"2023-11-16",
              "rsltEnd":"2023-11-17",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":1,
              "isExpand":1,
              "preNodes":"",
              "caption":""},

            {"id":2,
              "seq": 6000,
              "iconColsVal":[],
              "name":"单位B施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":21,
              "seq": 7000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"2023-11-19","end":"2023-11-29"}],
              "rsltStart":"2023-11-26",
              "rsltEnd":"2023-11-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":40,
              "isGroup":0,
              "parentId":2,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":22,
              "seq": 8000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-30","end":"2023-12-01"}],
              "rsltStart":"2023-11-30",
              "rsltEnd":"2023-12-02",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":2,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"04",
              "testCol2":"02",
              "testCol3":"123",
              "caption":""},
            {"id":23,
              "seq": 9000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-12-02","end":"2023-12-10"}],
              "rsltStart":"2023-12-02",
              "rsltEnd":"2023-12-11",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":0,
              "isGroup":0,
              "parentId":2,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"02",
              "testCol3":"123",
              "caption":""},
            {"id":24,
              "seq": 10000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"2023-12-11","end":"2023-12-26"}],
              "rsltStart":"2023-12-12",
              "rsltEnd":"2023-12-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":2,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"02",
              "testCol3":"123",
              "caption":""},

            {"id":3,
              "seq": 11000,
              "iconColsVal":[],
              "name":"单位C施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"01",
              "testCol3":"自定义列值3",
              "caption":""},
            {"id":31,
              "seq": 12000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"2023-11-19","end":"2023-11-29"}],
              "rsltStart":"2023-11-26",
              "rsltEnd":"2023-11-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":0,
              "isGroup":0,
              "parentId":3,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":32,
              "seq": 13000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-30","end":"2023-12-01"}],
              "rsltStart":"2023-11-30",
              "rsltEnd":"2023-12-02",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":3,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":33,
              "seq": 14000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-12-02","end":"2023-12-10"}],
              "rsltStart":"2023-12-02",
              "rsltEnd":"2023-12-11",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":0,
              "isGroup":0,
              "parentId":3,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":34,
              "seq": 15000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"2023-12-11","end":"2023-12-26"}],
              "rsltStart":"2023-12-12",
              "rsltEnd":"2023-12-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":3,
              "isExpand":1,
              "preNodes":"",
              "caption":""},

            {"id":4,
              "seq": 16000,
              "iconColsVal":[],
              "name":"单位D施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":41,
              "seq": 17000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"2023-11-19","end":"2023-11-29"}],
              "rsltStart":"2023-11-26",
              "rsltEnd":"2023-11-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":4,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"03",
              "testCol3":"345",
              "caption":""},
            {"id":42,
              "seq": 18000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-30","end":"2023-12-01"}],
              "rsltStart":"2023-11-30",
              "rsltEnd":"2023-12-02",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":4,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"01",
              "testCol3":"123",
              "caption":""},
            {"id":43,
              "seq": 19000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-12-02","end":"2023-12-10"}],
              "rsltStart":"2023-12-02",
              "rsltEnd":"2023-12-11",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"2",
              "pctComp":0,
              "isGroup":0,
              "parentId":4,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":44,
              "seq": 20000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"2023-12-11","end":"2023-12-26"}],
              "rsltStart":"2023-12-12",
              "rsltEnd":"2023-12-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":4,
              "isExpand":1,
              "preNodes":"",
              "caption":""},

            {"id":5,
              "seq": 16000,
              "iconColsVal":[],
              "name":"单位E施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "testCol1":"01",
              "testCol2":"00",
              "testCol3":"123",
              "caption":""},
            {"id":51,
              "seq": 17000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"2023-11-19","end":"2023-11-29"}],
              "rsltStart":"2023-11-26",
              "rsltEnd":"2023-11-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":5,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":52,
              "seq": 18000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-30","end":"2023-12-01"}],
              "rsltStart":"2023-11-30",
              "rsltEnd":"2023-12-02",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":5,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"02",
              "testCol2":"02",
              "testCol3":"123",
              "caption":""},
            {"id":53,
              "seq": 19000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-12-02","end":"2023-12-10"}],
              "rsltStart":"2023-12-02",
              "rsltEnd":"2023-12-11",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":5,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":54,
              "seq": 20000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"2023-12-11","end":"2023-12-26"}],
              "rsltStart":"2023-12-12",
              "rsltEnd":"2023-12-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":5,
              "isExpand":1,
              "preNodes":"",
              "testCol1":"02",
              "testCol2":"02",
              "testCol3":"123",
              "caption":""},

            {"id":6,
              "seq": 16000,
              "iconColsVal":[],
              "name":"单位F施工期间",
              "plan":[{}],
              "rsltStart":"",
              "rsltEnd":"",
              "rsltDur":1,
              "planBarColor":"",
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":1,
              "parentId":"",
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":61,
              "seq": 17000,
              "iconColsVal":[{"src":stop,"title":"停止"}],
              "name":"任务名称1",
              "plan":[{"start":"2023-11-19","end":"2023-11-29"}],
              "rsltStart":"2023-11-26",
              "rsltEnd":"2023-11-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":6,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":62,
              "seq": 18000,
              "iconColsVal":[],
              "name":"任务名称2",
              "plan":[{"start":"2023-11-30","end":"2023-12-01"}],
              "rsltStart":"2023-11-30",
              "rsltEnd":"2023-12-02",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":6,
              "testCol1":"02",
              "testCol2":"02",
              "testCol3":"123",
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":63,
              "seq": 19000,
              "iconColsVal":[{"src":star,"title":"星级"}],
              "name":"任务名称3",
              "plan":[{"start":"2023-12-02","end":"2023-12-10"}],
              "rsltStart":"2023-12-02",
              "rsltEnd":"2023-12-11",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"3",
              "pctComp":0,
              "isGroup":0,
              "parentId":6,
              "isExpand":1,
              "preNodes":"",
              "caption":""},
            {"id":64,
              "seq": 20000,
              "iconColsVal":[],
              "name":"任务名称4",
              "plan":[{"start":"2023-12-11","end":"2023-12-26"}],
              "rsltStart":"2023-12-12",
              "rsltEnd":"2023-12-29",
              "rsltDur":1,
              "planBarColor":vPlanBackground,
              "linkTo":"http://",
              "isMS":0,
              "resId":"1",
              "pctComp":0,
              "isGroup":0,
              "parentId":6,
              "isExpand":1,
              "preNodes":"",
              "caption":""}
          ];

          // 创建甘特图对象
          const myGantt = MZGantt.init();
          this.MZGantt = myGantt;

          // 启动甘特图编辑
          MZGanttEditor.start(myGantt);

          // 创建甘特图对象
          myGantt.createGantt("GanttChartDIV3", "day", ganttConfig, data);

          // 甘特图参数配置
          myGantt.config(ganttConfig);

          // 显示
          myGantt.drawGantt();


          // 单元格渲染事件
          myGantt.on("cellRender", function(row, cellObj) {
            var field = cellObj.field;

            // alert("callback");

            // 样式设置：任务名称
            if (field == "name") {
              if (row.plan[0].dur > 5) {
                cellObj.cellHTML = '<span style="color:red;" >' + row.name + '</span>';
                // cell.style.color = "red";
              }
              if (row.plan[0].dur >= 2 && row.plan[0].dur <= 5) {
                cellObj.cellHTML = '<span style="color:green;" >' + row.name + '</span>';
              }
              if (row.plan[0].dur < 2) {
                cellObj.cellHTML = '<span style="color:black;" >' + row.name + '</span>';
              }
            }

            // 样式设置：图标列
            if (field == "iconColsVal") {
              if (row.plan[0].dur > 5) {
                cellObj.cellHTML = '<img src="./images/stop.png">';
              }
            }

            // 样式设置：负责人
            if (field == "resId") {
              if (row.name == "任务名称1") {
                cellObj.ce11Style = 'color:green;font-weight:bold';
              }
            }

            // 样式设置：自定义列(使用自定义列名称)
            if (field == "tagCol1") {
              if (row.name == "任务名称2") {
                cellObj.cellHTML = '<b style="color:red;">' + row.custColsVal[0] + '</b>';
              }
            }

            // // 样式设置：自定义列(使用自定义列名称)
            // if (field == "testCol2") {
            // 	cellObj.cellHTML = '<input id="tstBtn" type ="button" value="隐藏里程碑" onclick="test1">';
            // }

            return cellObj;

            // 样式渲染处理(参数：点击行数据，点击单元格)
            // cellObj.cellRender = function (row, column) {
            // 	// 样式渲染处理逻辑
            // 	if (column.name == "name" && row.plan[0].dur > 5) {
            // 		column.cellHTML = '<b style="color:red;" >' + row.name + '</b>';
            // 		// column.style.color = "red";
            // 	}
            // 	if (column.name == "name" && row.plan[0].dur > 2 && row.plan[0].dur <= 5) {
            // 		column.cellHTML = '<b style="color:green;" >' + row.name + '</b>';
            // 	}

            // 	// e.ce11Cls = "myCellc1s";
            // 	// e.rowCls = "myrowc1s";
            // 	// e.cellHtml = '<span style="color:blue;">' + task.name + '</span>';

            // 	// //单元格样式
            // 	// if (column.name =="name") {
            // 	// 	e.ce11Cls ="myce11cls";
            // 	// }

            // 	// //行样式
            // 	// if (task.Summary == 1) {
            // 	// 	e.rowCls = "myrowc1s";
            // 	// }

            // 	// ////自定义单元格Htm1。如果是工期列，并且工期大与5天，显示红色
            // 	// if (field == "name" && task.plan.dur > 5) {
            // 	// 	e.cellHtml = '<b style="color:red;" >' + task.Name + '</b>';
            // 	// }
            // 	// if (field == "name" && task.plan.dur <= 2) {
            // 		// e.cellHtml = '<span style="color:blue;">' + task.name + '</span>';
            // 	// }
            // 	// if (task.Duration == 0) {
            // 	// 	e.rowCls ="deletetask";
            // 	// }
            // };
          });

          // 甘特图条渲染事件
          // myGantt.on("barRender", function(row, barObj) {
          //   // if (row.plan[0].dur > 5) {
          //   if (row.name == "任务名称2") {
          //     // barObj.planBarStyle = 'BORDER: #000000 1px solid;background:yellow;';
          //     // barObj.planBarLeftHtml = '<img width="20px" height="20px" src="./images/work.svg" />';

          //     // barObj.planBarOverHtml = '<div id="wzf_0" rowid="13" style="z-index: 9; display: inline-block;margin-top: 0px; margin-left: -20px; margin-right: 0px; background-color: #FF0000; height: 21px; width: 40px; border-radius: 6px;marrin-left:20px; "></div><div id="wzf_0" rowid="13" style="z-index: 9;display: inline-block; margin-right: 0px; background-color: #00FF00; height: 21px; width: 40px; border-radius: 6px;margin-left:70px; margin-top:0px; "></div>';

          //     barObj.planBarRightHtml = '<div style="display:block;">努力最酷啊</div>';
          //   }
          //   // if (row.plan[0].dur < 2) {
          //   //   barObj.rsltBarStyle = 'BORDER: #000000 1px solid;';
          //   //   barObj.progressBarStyle = 'BORDER: #000000 1px solid;';
          //   // }

          //   return barObj;
          // });

          // // 右键点击进度条事件
          // myGantt.on("clickBar", function(row, eventXY, dom) {
          //   console.log("click: 任务：" + row.name + ", 点击日期:" + eventXY.date);
          // });

          // // 右键点击进度条事件
          // myGantt.on("rightClick", function(row, eventXY, dom) {
          //   console.log("right click: 任务：" + row.name + ", 点击对象id:" + dom.id);
          //   console.log("点击日期:" + eventXY.date);
          // });
      },

      setBulkMoveType(){
        this.MZGantt.setBulkMoveType(this.bulkMoveType);
      },

      changeDur(e){
        changeDurSign = changeDurSign == "1"? "0" : 1;
        this.MZGantt.setDragChgDur(changeDurSign);
      },

      addRow(type){
        this.MZGantt.addRow(type);
      },

      deleteRows(){
        this.MZGantt.deleteRows();
      },

      getViewportSize() {
          return {
              width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
              height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
          };
      },

      autoFitPage() {
        this.contentHeight = this.getViewportSize().height - 400;
      }
    },

  }
</script>
<style scoped>
  .componentContainer {
    position: absolute;
    padding: 10px;
    left: 242px;
    top: 0;
    bottom: 20px;
    right: 3px;
    overflow-y:auto ;
    overflow-x: hidden;
  }
  .mzganttContainer{
    padding: 10px;
    /*width: 100%;*/
    /*height: 240px;*/
    box-shadow: 0 0 20px grey;
  }
  .test-btn-list{
    /*padding: 20px;*/
    position: absolute;
    bottom: 0px;
    height:80px;
  }
  .test-btn-list label{
    display: inline-flex;
    margin: 3px 20px;
    width: 293px;
    line-height: 23px;
  }
  .spread-host{
    width: 100%;
    height: 100%;
  }

</style>
